<!--
 * @Author: cest
 * @Date: 2022-08-08 11:43:47
 * @LastEditTime: 2022-08-08 18:10:37
 * @LastEditors: cest
 * @FilePath: /nuxt3-vite/pages/blog/index.vue
 * @Description: blog layout
-->
<script setup lang="ts">
const title = 'hello'
const description = 'world'

// 在特定页面使用 definePageMeta() 方法为该页面所对应的路由添加元信息
definePageMeta({

  // Nuxt 提供了一个可定制的布局架构，您可以在整个应用程序中使用它，非常适合将常见的 UI 或代码模式提取到可重用的布局组件中。
  //
  // 页面布局放置在 layouts/ 目录中，使用时会通过异步导入自动加载。 如果你创建了一个 layouts/default.vue 这将用于你应用中的所有页面。
  //
  // 通过将 layout 属性设置为组件选项的一部分来使用其他布局。

  // 使用 blog 布局
  layout: 'blog',
})

// 使用 useHead() 组合式 API 来设置特定的页面（组件）的头部信息，入参是一个对象或返回对象的函数，该对象可以具有以下属性：

// title 设置网页的标题
// titleTemplate 设置网页的标题模板
// base 设置文档根 URL 元素，即 <base> 标签
// script 设置脚本
// style 设置网页样式
// meta 设置元信息
// link 设置样式表
// charset 设置 <meta charset="UTF-8"> 标签
// viewport 设置 <meta name="viewport" ...> 标签
// htmlAttrs 为 <html> 元素添加属性
// bodyAttrs 为 <body> 元素添加属性

useHead({
  // 设置网页的标题模板，基于原有的网页标题进行更改
  titleTemplate: 'My Blog | Home - %s', // or, title => `My App - ${title}`
  // 设置 <meta name="viewport" ...> 标签
  // viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  // 设置 <meta charset="UTF-8"> 标签
  charset: 'utf-8',
  // 添加 <meta> 标签
  meta: [
    { name: 'description', content: 'My amazing site.' },
  ],
  // 为 <body> 添加类名
  bodyAttrs: {
    class: 'test',
  },
  htmlAttrs: {
    lang: 'zh',
  },
})
</script>

<template lang="pug">
.container.bg-cover.bg-center.flex.flex-col.items-center.justify-center
  .content
    .m-5.flex.justify-center
      img.avatar(src="~/assets/img/avatar.png" title="" alt="avatar")
    .m-5.flex.justify-center
      .introduce 路漫漫其修远兮吾将上下而求索
    .m-5.flex.justify-center
      .m-1
        img.icon(src="~/assets/img/avatar.png" title="博客" alt="博客" @click="")
      .m-1
        img.icon(src="~/assets/img/github.png" title="GitHub" alt="GitHub")
      .m-1
        img.icon(src="~/assets/img/twitter.png" title="Gitee" alt="twitter")
      .m-1
        img.icon(src="~/assets/img/bilibli.png" title="Bilibili" alt="Bilibili")
      .m-1
        img.icon(src="~/assets/img/miku.png" title="Miku" alt="Miku")
</template>

<style lang="styl" src='./styl/index.styl' scoped />
